<template>
  <view class="container">
    <view class="main">
      <view class="title">请为您的设备选取要连接的网络</view>
    </view>

    <view class="actions">
      <text>找不到想添加的网络?</text>
      <text>刷新</text>
    </view>

    <view class="common_cell">
      <u-cell :border="false" title="wifi密码123" @click="show = true">
        <view slot="value" class="custom_right">
          <u-icon name="lock-fill" size="28"></u-icon>
          <u-icon name="wifi" size="28"></u-icon>
          <!-- <u-icon name="arrow-right" size="26" color="#999999"></u-icon> -->
        </view>
      </u-cell>
    </view>

    <u-modal @close="show = false" :closeOnClickOverlay="true" :show="show" :title="title" @confirm="wifiConfirm">
      <view class="wifiValue_box">
        <text>密码</text>
        <u--input border="surround" v-model="wifiValue"></u--input>
      </view>
    </u-modal>
  </view>
</template>

<script>
import * as Api from "@/api/page";
import { checkLogin } from "@/core/app";
import * as UserApi from "@/api/user";

const App = getApp();

export default {
  components: {},
  data() {
    return {
      // 页面参数
      options: {},
      value: false,
      show: false,
      title: 'wifi名称WiFi名称',
      wifiValue: ''
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() { },

  methods: {
    toNext() {
      if (!this.value) {
        this.$api.toast("请先确认完成以上操作");
        return;
      }
    },
    wifiConfirm() {
      if (this.wifiValue !== "123") {
        return uni.showToast({
          title: "密码错误",
          icon: "none",
        });
      }
      this.show = false;

      // 跳转路由
      uni.navigateTo({
        url: "/pages/category/initDeviceFour/index",
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #f6f7fb;
  margin-top: 136.364rpx;

  position: relative;

}

.main {
  display: flex;
  justify-content: center;
}

.title {
  font-family: "Microsoft YaHei";
  font-size: 40.909rpx;
  font-weight: 700;
  line-height: 52.841rpx;
  text-align: left;
  color: rgba(0, 0, 0, 1);

  margin-bottom: 103.977rpx;
}

.desc {
  font-family: "Microsoft YaHei";
  font-size: 27.273rpx;
  font-weight: 400;
  line-height: 36rpx;
  text-align: center;
}

.footer {
  position: fixed;
  bottom: 51.136rpx;
  left: 42.614rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn {
  margin-top: 34.091rpx;
  width: 656.25rpx;
  height: 83.523rpx;
  background: rgba(96, 164, 247, 1);

  font-family: "Microsoft YaHei";
  font-size: 25.568rpx;
  font-weight: 400;
  line-height: 33.75rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;

  color: rgba(255, 255, 255, 1);
  border-radius: 41.666rpx;

  color: white;
}

.custom_right {
  display: flex;

}

.wifiValue_box {
  display: flex;
  align-items: center;

  text {
    margin-right: 10.227rpx;
  }
}

.actions {
  color: rgba(32, 132, 255, 1);
  font-family: "Microsoft YaHei";
  font-size: 27.273rpx;
  font-weight: 400;
  line-height: 36rpx;
  text-align: left;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-left: 40.909rpx;
  padding-right: 40.909rpx;

  margin-bottom: 40.909rpx;
}
</style>